import React from 'react'
import { Picker, Modal, Toast } from 'antd-mobile';
import { save } from './../../utils/apis'
import del from './../../assets/images/del.png';
import Main from '../../components/main/index';
import Back from '../../components/back';
import 'lib-flexible'
import './index.scss';
const alert = Modal.alert;
let familyobj = {
    name: '',
    age: '',
    relation: '',
    phone: '',
    corpname: ''
}
let workobj = {
    start: ['', ''],
    end: ['', ''],
    hiredate: '',
    termdate: '',
    corpname: '',
    colleague: '',
    phone: '',
}
let eduobj = {
    start: ['', ''],
    end: ['', ''],
    startdate: '',
    enddate: '',
    name: '',
    major: '',
    edu: '',
}
type Props = {
    match: any,
    history: any
}

export default class Edit extends React.Component<Props>{
    constructor(props: any) {
        super(props)
    }

    state = {
        id: '',
        sex: '',
        post: '',
        name: '',
        xzval: '',
        baseinfo: {
            constellation: '', //星座
            expectsalary: '',   //薪资
            entrydate: '', //入职日期
            permaddress: '',    //户籍地址
            address: '',      //现在住址
            idcard: '',    //身份证号

        },
        other: {
            innerflag: '', //是否有认识的人
            rfname: '', //认识人姓名
            relation: '', //认识人关系
            innerposition: '', //认识人职位
            illnessflag: '', //是否有重大疾病
            illnessdescr: '',  //疾病说明
            certificate: '',  //证书说明
        },
        fammems: [],
        works: [],
        edus: [],
        startdate: [],
        enddate: [],
        time: ['', ''],
        xzarr: [
            {
                value: "白羊座",
                label: "白羊座",
                date: "3月21日-4月19日"
            },
            {
                value: "金牛座",
                label: "金牛座",
                date: "4月20日-5月20日"
            },
            {
                value: "双子座",
                label: "双子座",
                date: "5月21日-6月21日"
            },
            {
                value: "巨蟹座",
                label: "巨蟹座",
                date: "6月22日-7月22日"
            },
            {
                value: "狮子座",
                label: "狮子座",
                date: "7月23日-8月22日"
            },
            {
                value: "处女座",
                label: "处女座",
                date: "8月23日～9月22日"
            },
            {
                value: "天秤座",
                label: "天秤座",
                date: "9月23日-10月23日"
            },
            {
                value: "天蝎座",
                label: "天蝎座",
                date: "10月24日-11月22日"
            },
            {
                value: "射手座",
                label: "射手座",
                date: "11月23日-12月21日"
            },
            {
                value: "摩羯座",
                label: "摩羯座",
                date: "12月22日-1月19日"
            },
            {
                value: "水瓶座",
                label: "水瓶座",
                date: "1月20日-2月18日"
            },
            {
                value: "双鱼座",
                label: "双鱼座",
                date: "2月19日-3月20日"
            }
        ],
        salaryarr: [
            {
                label: '3k-5k',
                value: '3k-5k'
            },
            {
                label: '5k-8k',
                value: '5k-8k'
            },
            {
                label: '8k-10k',
                value: '8k-10k'
            },
            {
                label: '10k-15k',
                value: '10k-15k'
            },
            {
                label: '15k-20k',
                value: '15k-20k'
            },
            {
                label: '20k-30k',
                value: '20k-30k'
            },
            {
                label: '30k-50k',
                value: '30k-50k'
            },
            {
                label: '50k-100k',
                value: '50k-100k'
            },
            {
                label: '100k-200k',
                value: '100k-200k'
            },
            {
                label: '200k-300k',
                value: '200k-300k'
            },
            {
                label: '300k以上',
                value: '300k以上'
            },
        ],
        entrydatearr: [
            {
                label: '即时',
                value: '即时'
            },
            {
                label: '一周以内',
                value: '一周以内'
            },
            {
                label: '一个月以内',
                value: '一个月以内'
            },
            {
                label: '1-3个月',
                value: '1-3个月'
            },
            {
                label: '三个月后',
                value: '三个月后'
            },
            {
                label: '待定',
                value: '待定'
            },

        ],
        whether: [
            {
                label: '是',
                value: '是'
            },
            {
                label: '否',
                value: '否'
            },
        ],
    }

    pickerChange(name, pname, val) {
        if (name)
            console.log(val, 'jksjjjsj', name);
        const obj = this.state[pname]
        obj[name] = val[0]
        this.setState({
            [pname]: { ...obj }
        })
    }



    ainputChange(p1, idx, p3, event) {
        console.log(idx, p1, p3);
        let arr = this.state[p1]
        arr[idx][p3] = event.target.value
        this.setState({
            [p1]: arr
        })

    }

    inputChange(name, pname, event) {
        const obj = this.state[pname]
        obj[name] = event.target.value
        this.setState({
            [pname]: { ...obj }
        })
    }

    timeChange(p1, idx, p3, name, val) {
        let arr = this.state[p1]
        // let name = p3+'time'
        arr[idx][p3] = val
        arr[idx][name] = val[0] !== val[1] ? val[0] + '/' + val[1] : val[0]
        this.setState({
            [p1]: arr
        })
    }

    delitem(name, idx, event) {
        const that = this
        let arr = this.state[name]

        const alertInstance = alert('', '此操作将删除该条记录, 是否继续?', [
            { text: '取消', onPress: () => console.log('cancel'), style: 'default' },
            {
                text: '确认', onPress: () => {
                    arr.splice(idx, 1);
                    that.setState({ [name]: arr })
                }
            },
        ]);
    }

    componentDidMount() {
       if(document){
           document.title="51招聘云"
       }
        const { match: { params: { id, info } } } = this.props

        let arr = decodeURIComponent(info).split(',')
        console.log(id, 'cansh', this.props, info, arr);
        this.setState({
            id: parseInt(id),
            sex: arr[0],
            name: arr[1],
            post: arr[2],
        })

        let one = []
        let two = []
        let now = new Date()
        let currentY = now.getFullYear()
        let currentM = now.getMonth() + 1
        let months = []
        let cmonths = []

        for (var i = 1; i <= 12; i++) {
            let obj = {
                label: i + '',
                value: i + '',
            }
            months.push(obj)
            if (i <= currentM) {
                cmonths.push(obj)
            }
        }

        for (var i = 0; i < 31; i++) {
            let v = currentY - i
            let obj = {
                label: v + '',
                value: v + '',
                children: []
            }
            if (v == currentY) {
                obj.children = cmonths
            } else {
                obj.children = months
            }
            one.push(obj)
            if (i == 30) {
                let data = {
                    label: v + '以前',
                    value: v + '以前'
                }
                one.push({
                    ...data,
                    children: [data]
                })
            }
        }

        let zj = {
            label: '至今', value: '至今'
        }
        two = [{ ...zj, children: [zj] }, ...one]

        console.log(one, '开始时间');
        let obj1 = { ...familyobj },
            obj2 = { ...workobj },
            obj3 = { ...eduobj }

        this.setState({
            startdate: one,
            enddate: two,
            fammems: [obj1],
            works: [obj2],
            edus: [obj3],
        })
    }

    add(name) {
        let obj = {}
        if (name == 'works') {
            obj = { ...workobj }
        } else if (name == 'edus') {
            obj = { ...eduobj }
        } else {
            obj = { ...familyobj }
        }
        let arr = this.state[name]
        arr.push(obj)
        if (arr.length > 3) {
            Toast.info('最多添加三项', 1)
            return false
        }
        this.setState({ [name]: arr })
    }

    submit() {
        alert('', '提交后不可修改, 是否继续?', [
            { text: '取消', onPress: () => console.log('cancel'), style: 'default' },
            {
                text: '确认', onPress: () => {
                    this.toSubmit()
                }
            },
        ]);


    }
    toSubmit() {
        const that = this
        const { id, baseinfo, fammems, works, other, edus } = that.state
        let params = { inteid: id, baseinfo, fammems, works, edus, other }
        save(params).then(res => {
            console.log(res, '获取数据');
            const { returnCode, result } = res
            if (returnCode == 'AAAAAAA') {
               
                Toast.success('提交成功', 3);
                setTimeout(()=>{
                    window.history.back()
                  },1800 *0.9)

            }
        }).catch(err => {
        })
    }



    render() {
        const { sex, name, post, xzarr, salaryarr, entrydatearr, startdate, enddate, baseinfo: { constellation, expectsalary, entrydate, permaddress, address, idcard }, other: { certificate, innerflag, rfname, relation, innerposition, illnessflag, illnessdescr }, time, fammems, works, edus, whether } = this.state
        return (
            <div>
                <Main type="4">
                    <div className='e-top flex'>
                        <div className='flex1'></div>
                        <Back history={this.props.history} />
                    </div>
                    <div className="name">
                        <div className="name-icon iconfont icon1"></div>
                        <div className="name-name">个人基本情况</div>
                    </div>
                    <div className="content formboxs">
                        <div className="flex ac base">
                            <div className="value">姓名：{name}</div>
                            {sex == '男' && <div className="sex iconfont iconnan1"></div>}
                            {sex == '女' && <div className="sex iconfont iconnv1"></div>}
                        </div>
                        <div className='flex'>
                            <div className="label">应聘职位：</div>
                            <div className="flex1 value">{post}</div>
                        </div>
                        <div className='flex'>
                            <div className="label">期望薪资：</div>
                            <div className='flex1'>
                                <Picker className="flex1 value" data={salaryarr} cols={1} value={[expectsalary]} onOk={this.pickerChange.bind(this, 'expectsalary', 'baseinfo')}>
                                    {expectsalary === '' ? <span className='placeholder'>请选择</span> : <span>{expectsalary}</span>}
                                </Picker>
                            </div>
                        </div>
                        <div className='flex'>
                            <div className="label">可入职日期：</div>
                            <div className='flex1'>
                                <Picker className="flex1 value" data={entrydatearr} cols={1} value={[entrydate]} onOk={this.pickerChange.bind(this, 'entrydate', 'baseinfo')}>
                                    {entrydate === '' ? <span className='placeholder'>请选择</span> : <span>{entrydate}</span>}
                                </Picker>
                            </div>
                        </div>
                        <div className='flex'>
                            <div className="label">星座：</div>
                            <div className='flex1'>
                                <Picker className="flex1 value" data={xzarr} cols={1} value={[constellation]} onOk={this.pickerChange.bind(this, 'constellation', 'baseinfo')}>
                                    {constellation === '' ? <span className='placeholder'>请选择</span> : <span>{constellation}</span>}
                                </Picker>
                            </div>
                        </div>
                        <div className='flex'>
                            <div className="label">身份证号：</div>
                            <input className="flex1 value input" placeholder='请填写' maxLength={18} type="text" value={idcard} onChange={this.inputChange.bind(this, 'idcard', 'baseinfo')} />
                        </div>
                        <div className='flex'>
                            <div className="label">户籍地址：</div>
                            <input className="flex1 value input" placeholder='请填写' maxLength={50} type="text" value={permaddress} onChange={this.inputChange.bind(this, 'permaddress', 'baseinfo')} />
                        </div>
                        <div className='flex'>
                            <div className="label">现在住址：</div>
                            <input className="flex1 value input" placeholder='请填写' maxLength={70} type="text" value={address} onChange={this.inputChange.bind(this, 'address', 'baseinfo')} />
                        </div>
                    </div>

                    {/* 家庭成员 S */}
                    <div className="name flex">
                        <div className="name-icon iconfont icon2"></div>
                        <div className="name-name flex1">家庭成员</div>
                        <div className='newadd' onClick={this.add.bind(this, 'fammems')}><div className="iconfont iconxinzeng"></div>添加</div>
                    </div>
                    <div className="content formboxs">
                        {fammems.map((item, idx) => {
                            return (
                                <div className='arritem flex'>

                                    <div className='flex1'>
                                        <div className='flex'>
                                            <div className="label">姓名：</div>
                                            <input className="flex1 value input" placeholder='请填写' maxLength={70} type="text" value={fammems[idx].name || ''} onChange={this.ainputChange.bind(this, 'fammems', idx, 'name')} />
                                        </div>
                                        <div className='flex'>
                                            <div className="label">年龄：</div>
                                            <input className="flex1 value input" placeholder='请填写' maxLength={70} type="text" value={fammems[idx].age || ''} onChange={this.ainputChange.bind(this, 'fammems', idx, 'age')} />
                                        </div>
                                        <div className='flex'>
                                            <div className="label">关系：</div>
                                            <input className="flex1 value input" placeholder='请填写' maxLength={70} type="text" value={fammems[idx].relation || ''} onChange={this.ainputChange.bind(this, 'fammems', idx, 'relation')} />
                                        </div>
                                        <div className='flex'>
                                            <div className="label">电话：</div>
                                            <input className="flex1 value input" placeholder='请填写' maxLength={11} type="text" value={fammems[idx].phone || ''} onChange={this.ainputChange.bind(this, 'fammems', idx, 'phone')} />
                                        </div>
                                        <div className='flex'>
                                            <div className="label">任职机构：</div>
                                            <input className="flex1 value input" placeholder='请填写' maxLength={70} type="text" value={fammems[idx].corpname || ''} onChange={this.ainputChange.bind(this, 'fammems', idx, 'corpname')} />
                                        </div>
                                    </div>
                                    {fammems.length > 1 && <div className='delitem flex' onClick={this.delitem.bind(this, 'fammems', idx)}>
                                        <img className="delicon" src={del} />
                                        <div>删除    </div>
                                    </div>}
                                </div>
                            )
                        })}

                    </div>
                    {/* 家庭成员 E */}

                    {/* 工作经历 S */}
                    <div className="name flex">
                        <div className="name-icon iconfont icon3"></div>
                        <div className="name-name flex1">工作经历</div>
                        <div className='newadd' onClick={this.add.bind(this, 'works')}><div className="iconfont iconxinzeng"></div>添加</div>
                    </div>
                    <div className="content formboxs">
                        {works.map((item, idx) => {
                            return (
                                <div className='arritem flex'>
                                    <div className='flex1'>
                                        <div className='flex'>
                                            <div className="label">开始时间：</div>
                                            <div className='flex1'>
                                                <Picker extra="请选择" data={startdate} cols={2} title="开始时间" value={works[idx].start} onOk={this.timeChange.bind(this, 'works', idx, 'start', 'hiredate')}>
                                                    {works[idx].hiredate === '' ? <span className='placeholder'>请选择</span> : <span>{works[idx].hiredate}</span>}
                                                </Picker>
                                            </div>
                                        </div>

                                        <div className='flex'>
                                            <div className="label">结束时间：</div>
                                            <div className='flex1'>
                                                <Picker extra="请选择" data={enddate} cols={2} title="结束时间" value={works[idx].end} onOk={this.timeChange.bind(this, 'works', idx, 'end', 'termdate')}>
                                                    {works[idx].termdate === '' ? <span className='placeholder'>请选择</span> : <span>{works[idx].termdate}</span>}
                                                </Picker>
                                            </div>
                                        </div>

                                        <div className='flex'>
                                            <div className="label">公司名称：</div>
                                            <input className="flex1 value input" placeholder='请填写' maxLength={70} type="text" value={works[idx].corpname || ''} onChange={this.ainputChange.bind(this, 'works', idx, 'corpname')} />
                                        </div>
                                        <div className='flex'>
                                            <div className="label">证明人：</div>
                                            <input className="flex1 value input" placeholder='请填写' maxLength={70} type="text" value={works[idx].witness || ''} onChange={this.ainputChange.bind(this, 'works', idx, 'witness')} />
                                        </div>
                                        <div className='flex'>
                                            <div className="label">电话：</div>
                                            <input className="flex1 value input" placeholder='请填写' maxLength={11} type="text" value={works[idx].witnesstel || ''} onChange={this.ainputChange.bind(this, 'works', idx, 'witnesstel')} />
                                        </div>
                                    </div>
                                    {works.length > 1 && <div className='delitem flex' onClick={this.delitem.bind(this, 'works', idx)}>
                                        <img className="delicon" src={del} />
                                        <div>删除    </div>
                                    </div>}

                                </div>

                            )
                        })}

                    </div>
                    {/* 工作经历 E */}


                    {/* 教育经历 S */}
                    <div className="name flex">
                        <div className="name-icon iconfont icon4"></div>
                        <div className="name-name flex1">教育经历</div>
                        <div className='newadd' onClick={this.add.bind(this, 'edus')}><div className="iconfont iconxinzeng"></div>添加</div>
                    </div>
                    <div className="content formboxs">
                        {edus.map((item, idx) => {
                            return (
                                <div className='arritem flex'>
                                    <div className='flex1'>
                                        <div className='flex'>
                                            <div className="label">学校名称：</div>
                                            <input className="flex1 value input" placeholder='请填写' maxLength={70} type="text" value={edus[idx].school} onChange={this.ainputChange.bind(this, 'edus', idx, 'school')} />
                                        </div>
                                        <div className='flex'>
                                            <div className="label">开始时间：</div>
                                            <div className='flex1'>
                                                <Picker extra="请选择" data={startdate} cols={2} title="开始时间" value={edus[idx].start} onOk={this.timeChange.bind(this, 'edus', idx, 'start', 'startdate')}>
                                                    {edus[idx].startdate === '' ? <span className='placeholder'>请选择</span> : <span>{edus[idx].startdate}</span>}
                                                </Picker>
                                            </div>
                                        </div>

                                        <div className='flex'>
                                            <div className="label">结束时间：</div>
                                            <div className='flex1'>
                                                <Picker extra="请选择" data={enddate} cols={2} title="结束时间" value={edus[idx].end} onOk={this.timeChange.bind(this, 'edus', idx, 'end', 'enddate')}>
                                                    {edus[idx].enddate === '' ? <span className='placeholder'>请选择</span> : <span>{edus[idx].enddate}</span>}
                                                </Picker>
                                            </div>
                                        </div>


                                        <div className='flex'>
                                            <div className="label">专业：</div>
                                            <input className="flex1 value input" placeholder='请填写' maxLength={70} type="text" value={edus[idx].major} onChange={this.ainputChange.bind(this, 'edus', idx, 'major')} />
                                        </div>
                                        <div className='flex'>
                                            <div className="label">学历：</div>
                                            <input className="flex1 value input" placeholder='请填写' maxLength={70} type="text" value={edus[idx].educationbg} onChange={this.ainputChange.bind(this, 'edus', idx, 'educationbg')} />
                                        </div>
                                    </div>
                                    {edus.length > 1 && <div className='delitem flex' onClick={this.delitem.bind(this, 'edus', idx)}>
                                        <img className="delicon" src={del} />
                                        <div>删除    </div>
                                    </div>}
                                </div>

                            )
                        })}

                    </div>
                    {/* 教育经历 E */}
                    <div className="name">
                        <div className="name-icon iconfont icon5"></div>
                        <div className="name-name">其它</div>
                    </div>
                    <div className="content formboxs">
                        <div className='flex'>
                            <div className="label">在公司是否有亲属/朋友：</div>
                            <div className='flex1'>
                                <Picker className="flex1 value" data={whether} cols={1} value={[innerflag]} onOk={this.pickerChange.bind(this, 'innerflag', 'other')}>
                                    {innerflag === '' ? <span className='placeholder'>请选择</span> : <span>{innerflag}</span>}
                                </Picker>
                            </div>
                        </div>
                        {/* 关系联动 */}
                        <div>
                            <div className='flex'>
                                <div className="label">姓名：</div>
                                <input className="flex1 value input" placeholder='请填写' maxLength={18} type="text" value={rfname} onChange={this.inputChange.bind(this, 'rfname', 'other')} />
                            </div>
                            <div className='flex'>
                                <div className="label">职位：</div>
                                <input className="flex1 value input" placeholder='请填写' maxLength={50} type="text" value={relation} onChange={this.inputChange.bind(this, 'relation', 'other')} />
                            </div>
                            <div className='flex'>
                                <div className="label">关系：</div>
                                <input className="flex1 value input" placeholder='请填写' maxLength={70} type="text" value={innerposition} onChange={this.inputChange.bind(this, 'innerposition', 'other')} />
                            </div>
                        </div>


                        <div className='flex'>
                            <div className="label">是否有重大疾病：</div>
                            <div className='flex1'>
                                <Picker className="flex1 value" data={whether} cols={1} value={[illnessflag]} onOk={this.pickerChange.bind(this, 'illnessflag', 'other')}>
                                    {illnessflag === '' ? <span className='placeholder'>请选择</span> : <span>{illnessflag}</span>}
                                </Picker>
                            </div>
                        </div>

                        <div className='flex'>
                            <div className="label">重大疾病说明：</div>
                            <input className="flex1 value input" placeholder='请填写' maxLength={18} type="text" value={illnessdescr} onChange={this.inputChange.bind(this, 'illnessdescr', 'other')} />
                        </div>
                        <div className='flex'>
                            <div className="label">获得证书：</div>
                            <input className="flex1 value input" placeholder='请填写(多个证书使用/分割)' maxLength={18} type="text" value={certificate} onChange={this.inputChange.bind(this, 'certificate', 'other')} />
                        </div>

                    </div>
                    <div className='zeh'></div>
                </Main>
                <div className='submit'>
                    <div className='submit-btn' onClick={this.submit.bind(this)}>提交</div>
                </div>
            </div>
        );
    }
}
